<template>
    <div class="science-login">
        <div class="JPdom" ref="JPdom"></div>
        <div class="science-center">
            <div class="science-data" v-show="name == '登录'">
                <header>账户登录</header>
                <el-form ref="formref" :model="form" label-width="95px" size="default" label-position="top">
                    <el-form-item class="text-item" label="账号/手机号">
                        <el-input placeholder="账号/手机号" name="phonenum" v-model="form.phonenum"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" class="text-item">
                        <el-input placeholder="密码" name="password" type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12" class="col m-0 p-0">
                            <button class="btn d-block btn-login2" type="button" @click="login">登录</button>
                        </el-col>
                        <el-col :span="12">
                            <!-- <button class="btn d-block btn-login2" type="button" @click="name = '忘记密码'">忘记密码</button> -->
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="science-data" v-show="name == '忘记密码'">
                <header>忘记密码</header>
                <div class="col" v-show="name == '忘记密码'">
                    <el-form ref="forgetref" :model="forget" label-width="95px" size="default" label-position="top">
                        <el-form-item class="text-item" label="手机号：" prop="phonenum">
                            <el-input placeholder="请输入手机号" name="phonenum" v-model="forget.phonenum"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label="验证码：" prop="yzm">
                            <div class="row m-0">
                                <div class="col p-0">
                                    <el-input placeholder="四位验证码" v-model="forget.yzm"></el-input>
                                </div>
                                <div class="col pr-0">
                                    <button class="d-block btn-login1 btn" @click.stop.prevent="click2"
                                        :disabled="time2 !== 60" v-text="time2 == 60 ? '验证码' : time2"></button>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item class="text-item" label="新密码：" prop="password">
                            <el-input placeholder="请输入新密码" name="newpassword" type="password"
                                v-model="forget.password"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col :span="12" class="col m-0 p-0">
                                <button class="btn btn-login1" type="button" @click="forgetpassword">修改密码</button>
                            </el-col>
                            <el-col :span="12">
                                <button class="btn d-block btn-login2" type="button" @click="name = '登录'">返回登录</button>
                            </el-col>
                        </el-row>

                    </el-form>
                </div>
            </div>
            <div>
           

            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onMounted, onUnmounted, reactive, ref } from "vue";
import {
    asynclogin,
    asyncgetregistphoneVerificationCode,
    asyncresetpassword,
} from "../../api/index";
import JParticles, { Particle } from 'jparticles'
import { isPhonenum } from "../../util/RegExp";
import { ElForm, ElMessage } from "element-plus";
import { Storekey } from "../../interface";
import { useRouter } from "vue-router";
const router = useRouter()
const dialogVisible = ref(false)
const time2 = ref(60)
defineProps<{ icon: string }>()


const form = reactive({
    password: "",
    phonenum: "",
})

const forget = reactive({
    phonenum: "",
    password: "",
    yzm: "",
})


const name = ref('登录')



const store = useStore(Storekey)




async function login() {
    const { phonenum, password } = form;
    asynclogin({ ID: phonenum, password }).then(() => {
        store.dispatch('actiononline')
        router.push('/')
    }).catch(c => {
        ElMessage.error(c);
    })
}



async function click2() {
    const { phonenum } = forget;
    if (time2.value !== 60) return;
    if (isPhonenum.test(phonenum)) {
        await asyncgetregistphoneVerificationCode(phonenum);
        const x = setInterval(() => {
            time2.value = time2.value - 1;
            if (time2.value == 0) {
                clearInterval(x);
                time2.value = 60;
            }
        }, 1000);
    }
}


const forgetref = ref<typeof ElForm>()

async function forgetpassword() {
    forgetref.value?.validate(async (valid: any) => {
        if (valid) {
            try {
                await asyncresetpassword(forget);
                ElMessage.success("修改个人信息成功");
                await asynclogin({
                    ID: forget.phonenum,
                    password: forget.password,
                });
                await store.dispatch('actiononline').then(() => {
                    router.push('/')
                })
                dialogVisible.value = false;
            } catch (e: any) {
                ElMessage.error(e);
            }
        } else {
            return false;
        }
    });
}






const JPdom = ref()
const jpdata = ref<Particle>()

function jp() {
    if (JPdom.value) {
        jpdata.value = new JParticles.Particle(JPdom.value, {
            color: "#fff",
            proximity: 90,
            range: 100,
            num: 0.1,
            maxR: 2.4,
            minR: 0.6,
            maxSpeed: 0.8,
            minSpeed: 0.1,
        })
    }
}

onMounted(() => {
    jp()
})

onUnmounted(() => {
    jpdata.value?.onDestroy()
    jpdata.value = undefined
})


</script>

<style scoped>
.science-login {
    display: grid;
    height: calc(100vh - 89px);
    width: 100vw;
    align-content: center;
    position: relative;
    overflow: hidden;
    margin-top: -64px;
}

.science-center {
    background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/science.png);
    width: 932px;
    height: 518px;
    background-repeat: no-repeat;
    background-size: contain;
    /* background: #43BEF3; */
    margin: 0 auto;
    box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
    border-radius: 8px;
    z-index: 1;
    display: flex;
}

.science-data {
    width: 442px;
    padding-left: 48px;
    padding-right: 74px;
    color: #fff;
    --color-43: #fff;
    padding-top: 48px;
}

.science-data header {
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 48px;
}

.btn-login1 {
    width: 148px;
    color: #fff;
    background: #1B3694;
    border-radius: 2px;
}

.btn-login2 {
    width: 148px;
    color: #fff;
    background: #17B44C;
    border-radius: 2px;
}

.btn-login3 {
    width: 148px;
    color: #fff;
    background: #17B44C;
    border-radius: 2px;
}

.text-item {
    margin-bottom: 24px;
}

.JPdom {
    position: fixed;
    height: calc(100vh + 64px);
    width: 100vw;
    background-color: rgb(41, 127, 186);

}

.science-text {
    margin-left: 48px;
    width: 217px;
    height: 33px;
    background: #164065;
    text-align: center;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1);
    color: #fff;
    line-height: 32px;
    margin-top: 140px;
}
</style>